<template>
  <!-- 寻车订单详情 -->
  <page-loading :show="showPage">
  <view class="container">
    <view class="stopcolor flex flex-jc-sb flex-jc-c flex-ai-c">
      <view class="zhantai">
        {{madappStatus}}
      </view>
    </view>
    <view class="dianpuxx">
      <view class="shopcss">
        <view class="carbox flex">
          <view class="carhead flex">
            <view>
                <image :src="'https://files.yzsheng.com/goodimg/brandimg/'+brandid+'.png'" mode="aspectFill"></image>
            </view>
            <view class="carhead">
              车型：
            </view>
          </view>
          <view class="carbody">
            {{madAppList.brand_Name}}{{madAppList.car_Type_Name}}{{madAppList.configuration_Name}}
          </view>
        </view>
        <view class="carbox flex">
          <view class="carhead">
						<text style="letter-spacing: 13rpx;">指导</text>价：
          </view>
          <view class="carbody">
            ￥{{madAppList.factory_Price}}
          </view>
        </view>
        <view class="carbox flex flex-ai-c">
          <view class="carhead">
            外观内饰：
          </view>
          <view class="carbody">
            <view class="kuang2">
              <view class="colorboxsss">
                <view class="white" :style="{background:xedColorList.outerColour[0].colorCoding}"></view>
                <view class="kuangtext">
                  外观 <!-- <span>{{xedColorList.outerColour[0].color}}</span> -->
                </view>
              </view>
              /
              <view class="colorboxsss">
                <view class="kuangtext">
                  内饰 <!-- <span>{{xedColorList.inColour[0].color}}</span> -->
                </view>
                <view class="kuang21" v-if="xedColorList.inColour[0].neiColor.length === 1">
                  <view class="white1" :style="{background:xedColorList.inColour[0].colorCoding}"></view>
                </view>
                <view class="kuangdoubu" v-if="xedColorList.inColour[0].neiColor.length === 2">
                  <view class="white4" style="border-radius: 10rpx 10rpx 0rpx 0rpx;" :style="{background:xedColorList.inColour[0].neiColor[0]}"></view>
                  <view class="white4" style="border-radius: 0rpx 0rpx 10rpx 10rpx;" :style="{background:xedColorList.inColour[0].neiColor[1]}"></view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="carbox flex">
          <view class="carhead">
            上户地区：
          </view>
          <view class="carbody">
            {{madAppList.province_Name}} {{madAppList.citiy_Name}}
          </view>
        </view>
      </view>
      <view class="titleord">
        过往询价信息
      </view>
      <view class="pastcss">
        <view class="font-34 flex flex-jc-sb flex-ai-c">
          <view class="carhead font-bold">
            落地总金额
          </view>
          <view class="carbody color-EB5B01 font-bold" style="font-size: 34rpx;">
            <span class="font-24">￥</span>{{madAppList.total_Money}}
          </view>
        </view>
        <view class="font-24 color-999">
          落地价+必要花费+商业保险
        </view>
        <view>
          <view class="bordercss mt-20"> </view>
          <view class="font-28 flex flex-jc-sb flex-ai-c mt-30">
            <view class="carhead">
              裸车价
            </view>
            <view class="font-26 carbody color-333 font-bold">
              ￥{{madAppList.car_Money}}
            </view>
          </view>
        </view>
        <view>
          <view class="bordercss mt-20"> </view>
          <view class="font-28 flex flex-jc-sb flex-ai-c mt-30">
            <view class="carhead">
              必要花费<span class="color-999 font-24 ml-25">购置税、交强险等</span>
            </view>
            <view class="font-26 carbody color-333 font-bold">
              ￥{{madAppList.other_Total_Money}}
            </view>
          </view>
        </view>
        <view>
          <view class="bordercss mt-20"> </view>
          <view class="font-28 flex flex-jc-sb flex-ai-c mt-30">
            <view class="carhead">
              商业保险
            </view>
            <view class="font-26 carbody color-333 font-bold">
              ￥{{madAppList.commercial_Insurance}}
            </view>
          </view>
        </view>
        <!-- 自定义项 -->
        <view v-for="(item,index) in madAppList.carFindOtherFeeList" :key="index">
          <view class="bordercss mt-20"> </view>
          <view class="font-28 flex flex-jc-sb flex-ai-c mt-30">
            <view class="carhead">
              {{item.item_Description}}
            </view>
            <view class="font-26 carbody color-333 font-bold">
              ￥{{item.item_Fee}}
            </view>
          </view>
        </view>
      </view>
      <!-- 待确认，已完成 -->
      <view class="titleord color-EB5B01 font-bold" v-show="qPriceLength === 0?false:true">
        已报价（{{qPriceLength}}人）
      </view>
      <view class="completed" v-for="(item,index) in qPriceList" :key="index">
        <view class="font-28 flex flex-jc-sb flex-ai-c">
          <view class="carhead color-999">
            报价人
          </view>
          <view class="font-28 carbody color-333">
            {{item.trueName}}
          </view>
        </view>
        <view class="font-28 flex flex-jc-sb flex-ai-c mt-20">
          <view class="carhead color-999">
            裸车价格
          </view>
          <view class="font-28 carbody color-EB5B01 font-bold">
            {{item.quoted_Price | million}}
          </view>
        </view>
        <view class="font-28 flex flex-jc-sb flex-ai-c mt-20">
          <view class="carhead color-999">
            提车期限
          </view>
          <view class="font-28 carbody color-333">
            {{item.get_Car_Deadline}}
          </view>
        </view>
        <view class="bordercss mt-20"> </view>
        <view class="flex mt-20">
          <view class="font-28 color-999 width-20" style="text-align: left;">
            备注：
          </view>
          <view class="carbody">
            {{item.remark}}
          </view>
        </view>
        <view class="bordercss mt-30"> </view>
        <view class="qurtbtn flex flex-jc-sb mt-20 flex-ai-c">
          <view class="flex">
            <view class="" @click="contact(item)">
              <i-icon class="iconscss" icon="iconxiaoxi" type="single" size="38rpx" color="#666666"></i-icon>
            </view>
            <view class="ml-80" @click="mobileiphone(item.mobile)">
              <i-icon class="iconscss" icon="icondianhua" type="single" size="38rpx" color="#666666"></i-icon>
            </view>
          </view>
          <view class="qurbj font-26 color-333" @click="qurbjClick(item.id,item)" v-if="item.status === '0'">
            <!-- 0激活，1成交 -->
            确认报价
          </view>
          <view class="tupimg" v-else>
            <image :src="'https://files.yzsheng.com/client/commodity/huizhang@2x.png'" mode="aspectFill"></image>
          </view>
        </view>
      </view>

      <view class="titleord">
        订单信息
      </view>
      <view class="ordlist">
        <view class="carbox flex flex-ai-c">
          <view class="carhead">
            询价订单号：
          </view>
          <view class="carbody flex flex-ai-c">
            <text>{{madAppList.order_No}}</text>
						<view class="copyss" @click="copyClick(madAppList.order_No)">
						  复制
						</view>
          </view>
          
        </view>
        <view class="carbox flex flex-ai-c">
          <view class="carhead">
            发起时间：
          </view>
          <view class="carbody">
						{{ returnTime(madAppList.addTime) }}
          </view>
        </view>
        <!-- 循环几个人报价了 -->
        <view class="carbox flex flex-ai-c" v-for="(item,index) in qPriceList" :key="index">
          <view class="carhead">
            {{item.trueName}}报价时间：
          </view>
          <view class="carbody">
						{{ returnTime(madAppList.addTime) }}
          </view>
        </view>

        <view class="carbox flex flex-ai-c" v-if="madAppList.updateTime===''?false:true">
          <view class="carhead">
            确认时间：
          </view>
          <view class="carbody">
						{{ returnTime(madAppList.updateTime) }}
          </view>
        </view>
      </view>
      <!-- <view class="brnzhd flex flex-ai-c flex-jc-c">
        <view class="imcsss">
          <i-icon class="iconscss" icon="iconxiaoxi" type="single" size="38rpx" color="#FFE23E"></i-icon>
          在线咨询
        </view>
        <view class="mobile" @click="mobileclick(madAppList.storePhone)">
          <i-icon class="iconscss" icon="icondianhua" type="single" size="32rpx" color="#333333"></i-icon>
          致电我们
        </view>
      </view> -->
    </view>
  </view>
  </page-loading>
</template>

<script src="./carSearchDetails.js"></script>
<style scoped lang="scss">
  @import './carSearchDetails.scss';
</style>
